<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .flex-box{
      display: flex;

    }
    .box{
      /** 设置flex-grow主轴的尺寸增长系数 */
      /*flex-grow: 1;*/
      /** 指定了 flex 元素在主轴方向上的初始大小 */
      /*flex-basis: 0;*/
      /** 这里我们也可以使用简写 */
      /**
        flex属性
        设置弹性项目如何增大或缩小，以适应弹性容器
        flex是 flex-grow flex-shrink flex-basis  的简写
        flex-shrink 指定了flex元素的收缩规则
        这里我们建议，每次写flex时，直接将三个参数全部写上
        如果写 flex: 1 表示 flex: 1 0 0
       */
      flex: 1 0 0;

    }
    .box1{
      background: deepskyblue;
    }
    .box2{
      background: pink;
      flex-basis: 200px;
    }
    .box3{
      background: deeppink;
    }
  </style>
</head>
<body>
<!--
  时间：2024年12月9日 10点12分
  关于弹性盒子的均匀分布
  我们一般使用flex：1 即可
  但是，如果有一个盒子有文字内容时，就会将盒子撑大，那这个时候，我们应该怎么办？

-->
<div class="flex-box">
  <div class="box box1">
    《活着》讲述了在大时代背景下，随着内战、三反五反、大跃进、“文化大革命”等社会变革，
    徐福贵的人生和家庭不断经受着苦难，到了最后所有亲人都先后离他而去，仅剩下年老的他和一头老牛相依为命。
    小说以普通、平实的故事情节讲述了在急剧变革的时代中福贵的不幸遭遇和坎坷命运，
    在冷静的笔触中展现了生命的意义和存在的价值，揭示了命运的无奈，与生活的不可捉摸。
  </div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>
</body>
</html>
